<template>
  <div v-if="selectList.length > 0" class="select-items-box">
    <template v-for="item in selectList">
      <div v-show="item.isShow" :key="item.id" class="select-item">
        <div
          v-if="item.name"
          class="select-item-label"
          :style="{ width: labelWidth }"
        >
          {{ item.name }}
        </div>
        <div class="select-item-content">
          <component
            :is="item.type"
            :select-style="item.selectStyle"
            :select-config="item.selectConfig"
            :is-reset="isReset"
            :dynamic-select-data="selectData"
            :select-data="item"
            @handlerSelectData="
              (obj, type) => handlerSelectData(obj, type, item.prop)
            "
          />
        </div>
      </div>
    </template>
  </div>
</template>

<script>
import SelectItems from './config'

export default {
  name: 'SelectItems',
  components: {
    ...SelectItems
  },
  props: {
    // 卡片配置
    selectList: {
      type: Array,
      default: () => []
    },
    dynamicSelectData: {
      type: Object,
      default: () => {}
    },
    labelWidth: {
      type: String,
      default: '105px'
    }
  },
  data() {
    return {
      isReset: false,
      selectData: {}
    }
  },
  watch: {
    dynamicSelectData: {
      handler(val) {},
      deep: true,
      immediate: true
    }
  },
  methods: {
    /**
     * 处理重置
     */
    handleReset() {
      this.isReset = !this.isReset
    },
    setSelectItemsVal(val) {
      if (val && Object.keys(val).length) {
        const selectData = {}
        for (const key in val) {
          if (Object.hasOwnProperty.call(val, key)) {
            selectData[key] = val[key]
          }
        }
        this.selectData = JSON.parse(JSON.stringify(selectData))
      }
    },
    /**
     * 处理筛选
     * @param {*} obj 数据
     * @param {*} type 类型
     */
    handlerSelectData(obj, type, prop) {
      this.$emit('handlerSelectData', obj, type, prop)
    }
  }
}
</script>

<style lang="scss" scoped>
.select-items-box {
  display: flex;
  flex-wrap: wrap;

  .select-item {
    display: flex;
    align-items: center;
    font-size: 14px;
    padding-right: 32px;
    margin-bottom: 16px;

    .select-item-label {
      width: 105px;
      padding-right: 16px;
      font-size: 14px;
      color: #666;
      text-align: right;
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-end;
    }
  }
}
</style>
